<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain @click="addhuanzhe">添加患者</el-button></el-col>     
            <el-col :span="4"><el-input v-model="input" placeholder="姓名"  prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain >查询</el-button></el-col>
         </el-row>
           
            <el-table :data="tableData"  border style="width: 100%" >
             <el-table-column align="center" 
                prop="name"
                label="姓名"
                width="80">
            </el-table-column>
            <el-table-column align="center"
                prop="idcard"
                label="身份证号"
                width="180">
            </el-table-column>
              <el-table-column align="center"
                prop="gender"
                label="性别"
                width="60">
            </el-table-column>
            <el-table-column align="center" 
                width="180"
                prop="source"
                label="接触来源">
            </el-table-column>
             <el-table-column align="center" 
                prop="gl_address"
                label="隔离地址"
                width="">
            </el-table-column>
           <el-table-column align="center"
                width=""
                prop="date"
                label="隔离开始日期">
                  <template slot-scope="scope">
                     <i class="el-icon-time"></i>
                     <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
             <!-- <el-table-column align="center" width="300"
                prop="do"
                label="操作"> -->
                <el-table-column align="center" width="300"
                label="操作">
                <el-button  plain  size="mini" @click="showById">编辑</el-button>
                <el-button type="primary" plain  size="mini" @click="Ridof_gl" >解除隔离</el-button>
                <el-button type="primary" plain size="mini" @click="showCureDialog">转为患者</el-button>
            </el-table-column>
         
         
        </el-table>
        <div class="block">
    
            <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
            </el-pagination> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>

            <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form ref="form"  :model="{form}" :rules="rules" label-width="150px">
                <el-row>
                    <el-col :span="12">        
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.isGender">
                            <el-radio :label="0">女</el-radio>
                            <el-radio :label="1">男</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>   
                <el-row>
                    <el-col :span="12">  
                        <el-form-item label="身份证号"   prop="idcard">
                            <el-input v-model="form.idcard"></el-input>
                        </el-form-item>   
                     </el-col>
                    <el-col :span="12">  
                        <el-form-item label="年龄">
                             <el-input-number v-model="form.age" :min="1" :max="120" ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>   
                 <el-row>
                    <el-col :span="12">   
                        <el-form-item label="电话号码"  prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>   
                    </el-col>
                    <el-col :span="12"> 
                        <el-form-item label="接触来源">
                             <el-input v-model="form.resource"></el-input>
                        </el-form-item>
                    </el-col>
                 </el-row>
                 <el-row>
                    <el-col :span="12">   
                        <el-form-item label="治疗医院">
                            <el-input v-model="form.hospital"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">   
                        <el-form-item label="隔离开始时间">
                        <el-date-picker
                                v-model="form.value"
                                type="date"
                                placeholder="请选择时间">
                                </el-date-picker>          
                       </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">   
                        <el-form-item label="住址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>  
                        </el-col>
                    <el-col :span="12">  
                       
                    </el-col>
                </el-row> 
                       


                    <!-- <el-form-item label="治愈时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.value"
                                type="date"
                                placeholder="请选择时间">
                                </el-date-picker>          
                    </el-form-item> -->
                    <!-- <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.desc" rows="4" max="200"></el-input>
                    </el-form-item> -->
                    </el-form>
                       <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                       </div>
                </el-dialog>

                 <el-dialog title="添加" :visible.sync="dialogFormVisible2">
                    <el-form ref="form"  :model="form" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="12">        
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-radio-group v-model="form.isGender">
                                    <el-radio :label="0">女</el-radio>
                                    <el-radio :label="1">男</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>   
                        <el-row>
                            <el-col :span="12">  
                                <el-form-item label="身份证号"   prop="idcard">
                                    <el-input v-model="form.idcard"></el-input>
                                </el-form-item>   
                            </el-col>
                            <el-col :span="12">  
                                <el-form-item label="年龄">
                                    <el-input-number v-model="form.age" :min="1" :max="120" ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>   
                        <el-row>
                            <el-col :span="12">   
                                <el-form-item label="电话号码"  prop="phone">
                                    <el-input v-model="form.phone"></el-input>
                                </el-form-item>   
                            </el-col>
                            <el-col :span="12"> 
                                <el-form-item label="接触来源">
                                    <el-input v-model="form.resource"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">   
                                <el-form-item label="治疗医院">
                                    <el-input v-model="form.hospital"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">   
                                <el-form-item label="隔离开始时间">
                                <el-date-picker
                                        v-model="form.value"
                                        type="date"
                                        placeholder="请选择时间">
                                        </el-date-picker>          
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">   
                                <el-form-item label="住址">
                                    <el-input v-model="form.address"></el-input>
                                </el-form-item>  
                                </el-col>
                            <el-col :span="12">  
                            
                            </el-col>
                        </el-row> 
                        </el-form>
                            <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
                            </div>
                    </el-dialog>
               
                    <el-dialog title="转为患者" :visible.sync="dialogFormVisible3">
                       <el-form ref="form"  :model="form" label-width="150px" >
                    <el-row>
                        <el-col :span="12">      
                            <el-form-item label="住院日期">
                                <el-date-picker v-model="form.value" type="datetime"  placeholder="检测时间">检测时间
                                </el-date-picker>
                            </el-form-item>
                        </el-col> 
                        <el-col :span="12">  
                            <el-form-item label="症状">
                                <el-input v-model="form.sym"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>   
                    <el-row>
                        <el-col :span="12">           
                            <el-form-item label="治疗医院">
                                <el-radio-group v-model="form.isResult">
                                    <el-input v-model="form.hospital"></el-input>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="备注">
                                    <el-input type="textarea" v-model="form.desc" rows="4" max="200"></el-input>
                            </el-form-item>
                            
                            </el-col> 
                            <el-col :span="12"> 
                                <el-form-item label="是否重症">
                                <el-radio-group v-model="form.isHealthy">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                                </el-form-item>
                            </el-col>
                    </el-row>                
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
                            </div>
                   </el-dialog>
        </div>

    </div>
</template>

<script>
// 封装axious代码
import request from '@/utils/request'
export default {
  data() {
    return {
        input: '',
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,  
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          gl_address:'',
           phone: '',
          idcard: '',
          address: '',
        },
        rules:{ 
            name: [
                 { required: true, message: '请输入姓名', trigger: 'blur' },
                 { min: 1, max: 10, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
            idcard: [
                 { required: true, message: '请输入身份证号', trigger: 'blur' },
                 { max: 18, message: '长度不超过18 个字符', trigger: 'blur' }
          ],
           phone: [
                 { required: true, message: '请输入手机号', trigger: 'blur' },
                 { min: 11,max:11,  message: '请正确输入手机号', trigger: 'change' },
          ],
        },
          formLabelWidth: '120px'
    }
  },
  created(){
      this.fetchData()
    //   this.showById()
  },
  methods:{
      fetchData(){
          request({
              url:'../patient_list.json',
              method:'get'
          }).then(response => {
              this.tableData = response.data
          })
      },
        //   alter(){
        //       request({
        //       url:'../alter/index.vue',
        //       method:'get'
        //   }).then(response => {
        //       this.alterData = response.data
        //   })
        //   },
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      showById(){
          //this.$router.push("/addhuanzhe/index")
           this.dialogFormVisible = true
            request({
              url:'../contact_list.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
      },
      showCureDialog(){
          this.dialogFormVisible3 = true
      },
      addhuanzhe(){
         this.dialogFormVisible2 = true
        // 这种方法不太行，都为空了
        // this.form = {}
        this.form={
            name:"",
            isGender:undefined,
            idcard:"",
            age:undefined,
            phone:"",
            value:"",
            resource:"",
            address:"",
            hospital:""  
        }
      },
 
    
      Ridof_gl() {
        this.$confirm('确定解除隔离吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

      
  }
}
</script>